<template>
  <teleport to="html">
    <div class="rescue-dialog">
      <eleDialog ref="dialogRef">
        <template #header>
          <p class="title">
            {{ `${props.geolocation?.province}${props.geolocation?.city} 地区保护热线` }}
          </p>
        </template>
        <template #content>
          <div class="content">
            <div class="geolocation">
              所在地区 --
              {{ props.geolocation.province }}
              {{ props.geolocation.city }}
            </div>
            <div class="rescueHotline" v-for="lineItem in props.rescueHotline" :key="lineItem.key">
              <div class="detail">{{ lineItem.details }}</div>
              <div class="line">{{ lineItem.line }}</div>
            </div>
          </div>
        </template>
        <!-- <template #footer>sdfsdf</template> -->
      </eleDialog>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import eleDialog from "@/components/ele-dialog/ele-dialog.vue"
import type { addressComponents } from "@/utils/getCurrentPosition"
import { ref } from "vue"

interface IProps {
  geolocation: addressComponents
  rescueHotline: any[]
}
const props = withDefaults(defineProps<IProps>(), {})

const dialogRef = ref<InstanceType<typeof eleDialog>>()

defineExpose({
  dialogRef
})
</script>

<style lang="less">
.rescue-dialog {
  .title {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
  }
  .content {
    padding: 10px 20px;
    .geolocation {
      font-size: 16px;
      color: #999;
      margin-bottom: 20px;
    }
    .rescueHotline {
      display: flex;
      justify-content: space-between;
      margin-bottom: 14px;
      font-size: 26px;
      font-weight: 600;
      .detail {
      }
      .line {
        color: red;
        font-style: italic;
      }
    }
  }
}
</style>
